import React,{ useState } from 'react'
import { useNavigate } from 'react-router-dom'
import '../../../scss/fan/register.scss'
import { Manager,Lock,Phone } from '@react-vant/icons';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { Flex, Upload } from 'antd';

// import { Flex } from 'react-vant'
import { Button, Input, Form,Overlay,PasswordInput,Dialog, Toast } from 'react-vant';


import axios from 'axios';
export default function login() {
  let navigate = useNavigate()
  const [src, setSrc] = useState('')
  const [show, setShow] = useState(false);
  const [loading, setLoading] = useState(false);
  let [code, setcode] = useState()
  let [img,setimg]=useState()
const [imageUrl, setImageUrl] = useState();
  let codeshow=()=>{
    const onSubmit = (val) => {
      if (val == code) {
        console.log(imageUrl);
        axios.post('http://localhost:3000/users/register',{value:src,img:img}).then(res => {
          navigate('/fan/login')
        })
      }else{
        Dialog.alert({
          message: '验证码错误',
        });
      }
       
      };
      return <PasswordInput value="" mask={false} onSubmit={onSubmit} />;
}



  const [form] = Form.useForm()
  //登录按钮
  const onFinish = async (values) => {
    setSrc(values)
    axios.post('http://localhost:3000/users/get_sms',{phone:values.tel}).then(res => {
       
        console.log(res.data.code);
        if(res.data.code==1){
          Toast('你电话号？？？');
        }
        if(res.data.code==0){
          setcode(res.data.sms)
          Toast('验证码已发送');
          setShow(true)
        }
      })
  }


  //图片
  const getBase64 = (img, callback) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  };


  const handleChange = (info) => {
   
    
    if (info.file.status === 'uploading') {
      setLoading(true);
      
      return;
    }
    if (info.file.status === 'done') {
      getBase64(info.file.originFileObj, (url) => {
        
        setimg(`http://localhost:3000/${info.file.response.data}`)
        setLoading(false);
        setImageUrl(url);
      });
    }
  };
  const uploadButton = (
    <button
      style={{
        border: 0,
        background: 'none',
      }}
      type="button"
    >
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div
        style={{
          marginTop: 8,
        }}
      >
        Upload
      </div>
    </button>
  );


  return (
    <div className='login'>
      <div className='top-img'>
        <Flex gap="middle" wrap>
        <Upload
            name="avatar"
            listType="picture-circle"
            className="avatar-uploader"
            showUploadList={false}
            action="http://localhost:3000/users/img"
            onChange={handleChange}
        >
            {imageUrl ? (
            <img
                src={imageUrl}
                alt="avatar"
                style={{
                width: '100%',
                height: '100%',
                borderRadius: '50%',
                }}
            />
            ) : (
            uploadButton
            )}
        </Upload>
        </Flex>
      </div>
      <div className='form'>
        
        <Form
          form={form}
          onFinish={onFinish}
          footer={
            <div style={{ margin: '16px 16px 0' }}>
              <Button round nativeType='submit' type='primary' block>
                注册
              </Button>
            </div>
          }
        >
          <Form.Item
            tooltip={{
              message:
                '用户名由字母、数字、下划线组成，长度在6~18之间',
            }}
            rules={[{ required: true, message: '请填写用户名' }]}
            name='username'
          >
          <Input
            prefix= {<Manager  />}
            
            placeholder="请输入用户名"
          />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '请填写密码' }]}
            name='password'
          >
          <Input
          prefix= {<Lock  />}
          type='password'
          placeholder='请输入密码'
          />
          </Form.Item>

          <Form.Item
            rules={[{ required: true, message: '请填写电话号码'}]}
            name='tel'
          >
          <Input
          prefix= {<Phone  />}
          type='tel'
          placeholder='请输入电话'
          />
          </Form.Item>
        </Form>
        <Overlay visible={show} onClick={() => setShow(false)} > 
        <h1>请输入验证码</h1>
        {codeshow()}
        </Overlay>
      </div>


    </div>
  )
}
